<template>
    <div class="index">
        <el-container direction="vertical">
            <el-header style="background-color: white;">
                <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                >
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">适配中心</el-menu-item>
                    <el-menu-item index="3">互动社区</el-menu-item>
                    <el-menu-item index="4">解决方案</el-menu-item>
                    <el-menu-item index="5">资源中心</el-menu-item>
                    <el-menu-item index="6">合作伙伴</el-menu-item>
                </el-menu>
            </el-header>
            <el-main>
                <router-view />
            </el-main>
            <el-footer style="background-color: white;">jio</el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1"
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style>
.index {
  height: calc(100vh);
}
html,
body,
#app,
.el-container {
  /*统一设置高度为100%*/
  height: 100%;
}
.el-header {
  text-align: center;
}
.el-main {
  background-color: rgba(199, 203, 206, 0.164);
  text-align: center;
}
</style>